import React from 'react';
import { IRouteComponentProps } from 'umi';
import style from '../index.less';
import { useModel } from 'umi';
import { PageHeader } from 'antd';
import { history } from 'umi';
import { Carousel } from 'antd';
import { useState, useEffect } from 'react';
const CarLi: React.FC<IRouteComponentProps> = ({ match, route }): any => {
  let id = JSON.parse(JSON.stringify(match)).params.id;
  let { getcarlist,getcaradd } = useModel('car', model => ({ getcarlist: model.getcarlist,getcaradd: model.getcaradd }));
  //上
  let [header, setHeader] = useState([])
  //中
  let [main, setMain] = useState([])
  //下
  let [fote, setFote] = useState([])
  //价
  let [many, setMany] = useState([])
  //0
  let [num,setNum] = useState(0)
  let [cari,setCari] = useState([])
  async function getcar(id: string) {
    let res = await getcarlist(id)
    console.log(res, 'car----------');
    setHeader(res.data.gallery)
    setMain(res.data.attribute)
    setFote(res.data.issue)
    setMany(res.data.info)
    setCari(res.data.productList)
  }
  useEffect(() => {
    getcar(id)
  }, [getcarlist])
  function ht() {
    history.go(-1)
  }
  function c_ar() {
    history.push('/main/cart')
  }
  function add(f:any) {
    f==='-'?num--:num++
    setNum(num)
  }
  async function caradd() {
    console.log(cari[0].id,'-----------');
    
    let data={
      goodsId:cari[0].goods_sn,
      number:num,
      productId:cari[0].id
    }
    let res = await getcaradd(data)
    console.log(res,'---------------');
    
    console.log(data,'-------');
    
  }
  return (
    //   制造商详情页
    <div className={style.brandDetail}>
      <PageHeader
        className={style.siteheader}
        onBack={() => ht()}
        title=""
        subTitle="购物详情"
      />
      <div className={style.banner_car}>
        <Carousel autoplay>
          {
            (header as unknown as any).map((item: any, index: number) => {
              return (
                <div key={index}>
                  <h3  className={style.contentStyle}>
                    <img src={item.img_url} alt="" />
                  </h3>
                </div>
              )
            })
          }
        </Carousel>
      </div>
      <div className={style.main_many}>
            <span>{many.goods_brief}</span>
            <span>{many.name}</span>
            <span>￥{many.retail_price}</span>
        <p>{many.promotion_desc} <button onClick={()=>add('-')}>-</button> {num} <button onClick={()=>add('+')}>+</button></p>
           
      </div>
      <div className={style.main_car}>
          <h5>参数</h5>
          {
            (main as unknown as any).map((item:any,index:number)=>{
              return (
                <li key={index}>
                  <span>{item.name}:</span>
              <span>{item.value}</span>
                </li>
              )
            })
          }
      </div>

      <div className={style.main_car1}>
          <h5>常见问题</h5>
          {
            (fote as unknown as any).map((item:any,index:number)=>{
              return (
                <li key={index}>
                  <span><b>√</b> {item.question}:</span>
                  <span>答:{item.answer}</span>
                </li>
              )
            })
          }
      </div>
      <div className={style.car_footer}>
          <span>☆</span>
          <span onClick={()=>c_ar()}>※</span>
          <div className={style.car_a}> 立即购买</div>
          <div onClick={()=>caradd()}>加入购物车</div>
      </div>
    </div>
  );
};

export default CarLi;
